<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <!-- css -->
        <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
        <link href="../css/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
        <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="../css/components.min.css" rel="stylesheet" type="text/css"/>
        <link href="../css/layout.min.css" rel="stylesheet" type="text/css"/>
        <link href="../css/light.min.css" rel="stylesheet" type="text/css"/>
        <link href="../css/main.css" rel="stylesheet" type="text/css"/>
        <!-- js -->
        <script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="../js/bootstrap.min.js" type="text/javascript"></script>
        <script src="../js/app.min.js" type="text/javascript"></script>
        <script src="../js/layout.min.js" type="text/javascript"></script>
        <script src="../js/flot/jquery.flot.min.js" type="text/javascript"></script>
        <script src="../js/flot/jquery.flot.resize.min.js" type="text/javascript"></script>
        <script src="../js/flot/jquery.flot.categories.min.js" type="text/javascript"></script>
        <script src="../js/flot/jquery.flot.pie.min.js" type="text/javascript"></script>
        <script src="../js/flot/jquery.flot.stack.min.js" type="text/javascript"></script>
        <script src="../js/flot/jquery.flot.crosshair.min.js" type="text/javascript"></script>
        <script src="../js/flot/jquery.flot.axislabels.js" type="text/javascript"></script>
        <script src="../js/flot/jquery.flot.time.min.js" type="text/javascript"></script>
        <script src="../js/main.js" type="text/javascript"></script>
        <title>查看监控</title>
        <!-- END THEME LAYOUT STYLES -->
    </head>
    <!-- END HEAD -->

    <body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white">
        <div class="page-header navbar navbar-fixed-top">
            <!-- BEGIN HEADER INNER -->
            <div class="page-header-inner ">
                <div class="page-logo">
                    <img class="ml40 mt15" src="../images/icons/logo.png" alt=""/>
                </div>
                <a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
                    <span></span>
                </a>
                <div class="page-top">
                    <div class="top-menu">
                        <ul class="nav navbar-nav pull-right">
                            <li class="separator hide"> </li>
                            <li class="dropdown dropdown-user dropdown-dark">
                                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                                    <img alt="" class="user-img" src="../images/icons/user.png" /> 
                                </a>
                                <ul class="dropdown-menu dropdown-menu-default">
                                    <li>
                                        <a href="mybooking.html">
                                            <img src="../images/icons/mybooking.png" alt=""/>&nbsp;&nbsp;我的订单
                                        </a>
                                    </li>
                                    <li>
                                        <a href="myinfo.html">
                                            <img src="../images/icons/myinfo.png" alt=""/>&nbsp;&nbsp;用户信息
                                        </a>
                                    </li>
                                    <li>
                                        <a href="repwd.html">
                                            <img src="../images/icons/repwd.png" alt=""/>&nbsp;&nbsp;修改密码
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="dropdown dropdown-extended dropdown-tasks dropdown-dark">
                                <a href="login.html" class="logout">Lot out</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="page-container">
            <div class="page-sidebar-wrapper">
                <div class="page-sidebar navbar-collapse collapse">
                    <ul class="page-sidebar-menu  page-header-fixed ">
                        <li class="nav-item start">
                            <a href="index.html" class="nav-link nav-toggle">
                                <img class="icon" src="../images/icons/home.png" alt=""/><span class="title">首页</span>
                                <span class="selected"></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="yunzhuji.html" class="nav-link nav-toggle">
                                <img class="icon" src="../images/icons/yunzhuji.png" alt=""/><span class="title">云主机</span>
                                <span class="selected"></span>
                            </a>
                        </li>
                        <li class="nav-item open active">
                            <a href="yunjiankong.html" class="nav-link nav-toggle">
                                <img class="icon" src="../images/icons/yunjiankong.png" alt=""/><span class="title">云监控</span>
                                <span class="selected"></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="yunqunzu.html" class="nav-link nav-toggle">
                                <img class="icon" src="../images/icons/yunqunzu.png" alt=""/><span class="title">云群组</span>
                                <span class="selected"></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="yunshichang.html" class="nav-link nav-toggle">
                                <img class="icon" src="../images/icons/yunshichang.png" alt=""/><span class="title">云市场</span>
                                <span class="selected"></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="gerenguanli.html" class="nav-link nav-toggle">
                                <img class="icon" src="../images/icons/manager.png" alt=""/><span class="title">管理中心</span>
                                <span class="selected"></span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="admin.html" class="nav-link nav-toggle">
                                <img class="icon" src="../images/icons/admin.png" alt=""/><span class="title">admin管理</span>
                                <span class="selected"></span>
                            </a>
                        </li>
                    </ul>
                    <!-- END SIDEBAR MENU -->
                    <!-- END SIDEBAR MENU -->
                </div>
                <!-- END SIDEBAR -->
            </div>
            <!-- END SIDEBAR -->
            <!-- BEGIN CONTENT -->
            <div class="page-content-wrapper">
                <!-- BEGIN CONTENT BODY -->
                <div class="page-content">
                    <div id="content">
                        <div id="yunjiankong" class="">
                            <div class="yunjiankong-header clearfix">
                                <img class="header-img" src="../images/yunjiankong/header.png" alt=""/><span class="yunjiankong-title">云监控</span>
                                <span class="sub-title"><a href="yunjiankong.html">云监控</a> <i class="fa fa-angle-right" aria-hidden="true"></i> <span>查看监控</span></span>
                            </div>
                            <div class="mt3">
                                <ul class="nav nav-tabs " role="tablist">
                                    <li role="presentation" class="active"><a href="#jiankong" role="tab" data-toggle="tab">查看监控</a></li>
                                    <li role="presentation"><a href="#baojing" role="tab" data-toggle="tab">报警规则</a></li>
                                </ul>
                                <!-- Tab panes -->
                                <div class="tab-content yunjiankong-tabcontent pl20 pr20 pb30">
                                    <div role="tabpanel" class="tab-pane active" id="jiankong">
                                        <div class="jiankong">
                                            <div class="clearfix pt15 pb15">
                                                <span class="header-zhuji color-687780">
                                                    iZlllwsow4sZ
                                                </span>
                                            </div>
                                            <div class="sub-tab clearfix"><span class="text">基础监控</span><div class="line"></div></div>
                                            <div class="row mt20">
                                                <div class="col-lg-4 col-md-6 col-sm-6 ml60">
                                                    <div class=" portlet light bordered">
                                                        <div class="pl20">139.196.147.143: CPU使用率</div>
                                                        <div id="chart_1_1" class="chart"> </div>
                                                        <table class="table text-left mt5">
                                                            <tbody>
                                                                <tr>
                                                                    <td></td>
                                                                    <td>最新</td>
                                                                    <td>最小</td>
                                                                    <td>平均</td>
                                                                    <td>最大</td>
                                                                </tr>
                                                                <tr>
                                                                    <td><span class="greenBlock"></span> CPU使用率 [没有数据]</td>
                                                                    <td></td>
                                                                    <td></td>
                                                                    <td></td>
                                                                    <td></td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                        <div class="font-12 color-unkonwn text-right">数据来自history, 产生于0.01秒</div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 col-sm-6">
                                                    <div class=" portlet light bordered">
                                                        <div class="pl20">139.196.147.143: 网络流入速率(1h)</div>
                                                        <div id="chart_1_2" class="chart"> </div>
                                                        <table class="table text-left mt5">
                                                            <tbody>
                                                                <tr>
                                                                    <td></td>
                                                                    <td>最新</td>
                                                                    <td>最小</td>
                                                                    <td>平均</td>
                                                                    <td>最大</td>
                                                                </tr>
                                                                <tr>
                                                                    <td><span class="greenBlock"></span> 网络流入速率 [平均]</td>
                                                                    <td>309.54M</td>
                                                                    <td>308.63M</td>
                                                                    <td>309.07M</td>
                                                                    <td>309M</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                        <div class="font-12 color-unkonwn text-right">数据来自history, 产生于0.01秒</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="sub-tab mt20"><span class="text">操作系统级别监控</span><div class="line"></div></div>
                                            <div class="row mt20">
                                                <div class="col-lg-4 col-md-6 col-sm-6 ml60">
                                                    <div class=" portlet light bordered">
                                                        <div class="pl20">139.196.147.143: TCP活动状态(1h)</div>
                                                        <div id="chart_1_3" class="chart"> </div>
                                                        <table class="table text-left mt5">
                                                            <tbody>
                                                                <tr>
                                                                    <td></td>
                                                                    <td>最新</td>
                                                                    <td>最小</td>
                                                                    <td>平均</td>
                                                                    <td>最大</td>
                                                                </tr>
                                                                <tr>
                                                                    <td><span class="greenBlock"></span> TCP活动状态 [平均]</td>
                                                                    <td>1</td>
                                                                    <td>1</td>
                                                                    <td>1</td>
                                                                    <td>1</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                        <div class="font-12 color-unkonwn text-right">数据来自history, 产生于0.01秒</div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4 col-md-6 col-sm-6">
                                                    <div class=" portlet light bordered">
                                                        <div class="pl20">139.196.147.143: 内存使用率(1h)</div>
                                                        <div id="chart_1_4" class="chart"> </div>
                                                        <table class="table text-left mt5">
                                                            <tbody>
                                                                <tr>
                                                                    <td></td>
                                                                    <td>最新</td>
                                                                    <td>最小</td>
                                                                    <td>平均</td>
                                                                    <td>最大</td>
                                                                </tr>
                                                                <tr>
                                                                    <td><span class="greenBlock"></span> TCP活动状态 [平均]</td>
                                                                    <td>2.22G</td>
                                                                    <td>2.22G</td>
                                                                    <td>2.22G</td>
                                                                    <td>2.22G</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                        <div class="font-12 color-unkonwn text-right">数据来自history, 产生于0.01秒</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="baojing">
                                        <div class="clearfix pt5 pb15">
                                            <span class="header-zhuji pull-left  color-687780">
                                                iZlllwsow4sZ
                                            </span>
                                            <span class="pull-left mt10 ml40" data-toggle="modal" data-target=".addRuleModal"><img src="../images/yunjiankong/addrule.png" alt=""/>
                                                <a class="default-link">创建报警规则</a></span>
                                        </div>
                                        <div>
                                            <table class="table table-bordered tableRule">
                                                <thead>
                                                    <tr>
                                                        <td style="width: 12%;"><input class="checkall" type="checkbox"/>监控项</td>
                                                        <td style="width: 15%;">规则描述</td>
                                                        <td style="width: 10%;">统计周期</td>
                                                        <td style="width: 15%;">通知对象</td>
                                                        <td style="width: 10%;">启用</td>
                                                        <td style="width: 15%;">报警次数</td>
                                                        <td style="width: 15%">操作</td>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td><input class="checkall" type="checkbox"/>  CPU使用率</td>
                                                        <td>最大值大于50</td>
                                                        <td>10分钟</td>
                                                        <td>89641198@qq.com</td>
                                                        <td>是</td>
                                                        <td>8</td>
                                                        <td>
                                                            <div class="operatelist">
                                                                <span class="operate first yunjingkoing-start" data-toggle="modal" data-target=".yunJianKongStartModal"></span>
                                                                <span class="operate yunjingkoing-view" ></span>
                                                                <span class="operate yunjingkoing-warning" ></span>
                                                                <span class="operate yunjingkoing-close" data-toggle="modal" data-target=".yunJianKongCloseModal"></span>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td><input class="checkall" type="checkbox"/>  CPU使用率</td>
                                                        <td>最大值大于50</td>
                                                        <td>10分钟</td>
                                                        <td>89641198@qq.com</td>
                                                        <td>是</td>
                                                        <td>8</td>
                                                        <td>
                                                            <div class="operatelist">
                                                                <span class="operate first yunjingkoing-start" data-toggle="modal" data-target=".yunJianKongStartModal"></span>
                                                                <span class="operate yunjingkoing-view" ></span>
                                                                <span class="operate yunjingkoing-warning" ></span>
                                                                <span class="operate yunjingkoing-close" data-toggle="modal" data-target=".yunJianKongCloseModal"></span>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><!-- content -->
                    </div>
                </div>     
            </div>
            <!-- END QUICK SIDEBAR -->
        </div>
        <div class="page-footer">
            <div class="page-footer-inner">

            </div>
            <div class="scroll-to-top">
                <i class="icon-arrow-up"></i>
            </div>
        </div>
        <div class="modal fade modal-default yunJianKongStartModal" tabindex="-1" role="dialog" aria-labelledby="startModal" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-title"><span class="close" data-dismiss="modal"></span>开启监控</div>
                <div class="modal-content">
                    <div class="pt35 text-center">
                        <img style="width: 20px" src="../images/icons/icon-warning.png" alt=""/>
                        您正在启动监控iZlllwsow4sZ
                    </div>
                    <div class="mt35 text-center">
                        <a class="btn btn-blue mr35 model-confirm">确认</a>
                        <a class="btn btn-default" data-dismiss="modal">取消</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade modal-default yunJianKongCloseModal" tabindex="-1" role="dialog" aria-labelledby="startModal" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-title"><span class="close" data-dismiss="modal"></span>关闭监控</div>
                <div class="modal-content">
                    <div class="pt35 text-center">
                        <img style="width: 20px" src="../images/icons/icon-warning.png" alt=""/>
                        您正在关闭监控iZlllwsow4sZ
                    </div>
                    <div class="mt35 text-center">
                        <a class="btn btn-blue mr35 model-confirm">确认</a>
                        <a class="btn btn-default" data-dismiss="modal">取消</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade modal-default addRuleModal" tabindex="-1" role="dialog" aria-labelledby="addRuleModal" aria-hidden="true">
            <div class="modal-dialog modal-lg mt200">
                <div class="modal-content">
                    <div class="modal-title"><span class="close" data-dismiss="modal"></span>创建报警规则</div>
                    <div class="pt10 text-left pl20 pr20 addRole">
                        <div class="">正在对<span class="color-blue">iZlllwsow4sZ</span>设置报警规则</div>
                        <table class="table table-sm table-bordered mt10 mb0 addRoleTable">
                            <thead>
                                <tr>
                                    <td style="width: 20%;">监控项</td>
                                    <td>统计周期</td>
                                    <td style="width: 15%;">统计方法</td>
                                    <td style="width: 15%;"></td>
                                    <td style="width:20%;"></td>
                                    <td></td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="pl10 pr10 pt10 pb10">
                                        <select name="item[]" class="form-control item">
                                            <option value="1">服务器存活</option>
                                            <option value="2">网络流入速率</option>
                                            <option value="3">网络流出速率</option>
                                            <option value="4">TCP活动状态</option>
                                            <option value="5">系统平均负载</option>
                                            <option value="6">CPU使用率</option>
                                            <option value="7">磁盘IO读</option>
                                            <option value="8">磁盘IO写</option>
                                            <option value="9">磁盘可用剩余量</option>
                                            <option value="10">内存可用量</option>
                                        </select>
                                    </td>
                                    <td class="pl10 pr10 pt10 pb10">
                                        <select name="cycle[]" class="form-control ">
                                            <option value="1">5分钟</option>
                                            <option value="2">10分钟</option>
                                            <option value="3">15分钟</option>
                                            <option value="4">30分钟</option>
                                            <option value="5">1小时</option>
                                        </select>
                                    </td>
                                    <td class="pl10 pr10 pt10 pb10 method">
                                        <select name="method[]" class="form-control">
                                            <option>状态</option>
                                        </select>
                                    </td>
                                    <td class="pl10 pr10 pt10 pb10 operator">
                                        <select name="operator[]" class="form-control">
                                            <option value="5">等于</option>
                                        </select>
                                    </td>
                                    <td class="pl10 pr10 pt10 pb10 thresholds">
                                        <select class="form-control " name="thresholds[]">
                                            <option value="1">异常</option>
                                        </select>
                                    </td>
                                    <td class="pl10 pr10 pt10 pb10">
                                        <a class="font-12 deleteRoleBtn">删除</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="bg-default pl10 pb30">
                            <a class="noline mt10 addRoleBtn">增加规则</a>
                            <div class="mt30 text-center">
                                <a class="btn btn-blue mr35 addRoleConfirm">确认</a>
                                <a class="btn btn-default" data-dismiss="modal">取消</a>
                            </div>
                        </div>
                    </div>
                    <div class="pt10 text-left pl20 pr20 addRoleForm" style="display: none;">
                        <div class="">报警通知对象</div>
                        <div class="pt10 pb30 border-gray bg-default mt5">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="user" class="col-md-3 control-label">通知人</label>
                                    <div class="col-md-8">
                                        <input type="text" class="form-control" id="user" placeholder="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="email" class="col-md-3 control-label">通知邮箱</label>
                                    <div class="col-md-8">
                                        <select id="email" class="form-control">
                                            <option>11@qq.com</option>
                                            <option>22@qq.com</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="other" class="col-md-3 control-label">抄送</label>
                                    <div class="col-md-8">
                                        <input type="text" class="form-control" id="other" placeholder="">
                                    </div>
                                </div>
                                <div class="mt35 text-center">
                                    <a class="btn btn-blue mr35" data-dismiss="modal">提交</a>
                                    <a class="btn btn-default" data-dismiss="modal">取消</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function () {
                //增加规则
                var itemHtml = '<select name="item[]" class="form-control item">' +
                        '<option value="1">服务器存活</option>' +
                        '<option value="2">网络流入速率</option>' +
                        '<option value="3">网络流出速率</option>' +
                        '<option value="4">TCP活动状态</option>' +
                        '<option value="5">系统平均负载</option>' +
                        '<option value="6">CPU使用率</option>' +
                        '<option value="7">磁盘IO读</option>' +
                        '<option value="8">磁盘IO写</option>' +
                        '<option value="9">磁盘可用剩余量</option>' +
                        '<option value="10">内存可用量</option>' +
                        '</select>';
                var cycleHtml = '<select name="cycle[]" class="form-control ">' +
                        '<option value="1">5分钟</option>' +
                        '<option value="2">10分钟</option>' +
                        '<option value="3">15分钟</option>' +
                        '<option value="4">30分钟</option>' +
                        '<option value="5">1小时</option>' +
                        '</select>';
                var methodHtml = '<select name="method[]" class="form-control">' +
                        '<option>状态</option>' +
                        '</select>';
                var operatorHtml = '<select name="operator[]" class="form-control">' +
                        '<option value="5">等于</option>' +
                        '</select>';
                var thresholdsHtml = '<select class="form-control " name="thresholds[]">' +
                        '<option value="1">异常</option>' +
                        '</select>';
                var deleteHtml = '<a class="font-12 deleteRoleBtn">删除</a>';
                var roleHtml = '<tr><td class="pl10 pr10 pt10 pb10">' +
                        itemHtml + '</td><td class="pl10 pr10 pt10 pb10">' +
                        cycleHtml + '</td><td class="pl10 pr10 pt10 pb10 method">' +
                        methodHtml + '</td><td class="pl10 pr10 pt10 pb10 operator">' +
                        operatorHtml + '</td><td class="pl10 pr10 pt10 pb10 thresholds">' +
                        thresholdsHtml + '</td><td class="pl10 pr10 pt10 pb10">' +
                        deleteHtml +
                        '</td></tr>';
                initAddRoleItemChange();
                $('.addRoleBtn').click(function () {
                    $('.addRoleTable tbody').append(roleHtml);
                    initAddRoleItemChange();
                    $('.deleteRoleBtn').click(function () {
                        var tableLength = $(".addRoleTable tbody tr").length;
                        if (tableLength > 1) {
                            $(this).parents('tr').remove();
                        }
                    });
                });
                $('.deleteRoleBtn').click(function () {
                    var tableLength = $(".addRoleTable tbody tr").length;
                    if (tableLength > 1) {
                        $(this).parents('tr').remove();
                    }
                });
                $('.addRoleConfirm').click(function () {
                    $('.addRole').hide();
                    $('.addRoleForm').show();
                });
                $('.addRuleModal').on('hidden.bs.modal', function (e) {
                    $('.addRoleForm').hide();
                    $('.addRole').show();
                });
                //图表
                var d1 = [];
                //生成模拟数据
                for (var i = 0; i < 60; i += 5)
                    d1.push([getTime(i), Math.floor(Math.random() * 10) + 1]);
                var options = {
                    axisLabels: {
                        show: true
                    },
                    xaxes: [{
                            axisLabel: '', //x轴文字描述
                            tickColor: "#eee",
                            mode: "time",
                            timeformat: "%H:%M",
                            tickSize: [5, "minute"],
                            timezone: "browser"
                        }],
                    yaxes: [{
                            position: 'left', //y轴文字描述
                            axisLabel: '',
                            tickColor: "#eee",
                        }, {
                            position: 'right',
                            axisLabel: 'Change(%)'
                        }],
                    grid: {
                        borderColor: "#eee",
                        borderWidth: 1
                    }
                };

                $.plot($("#chart_1_1"),
                        [{
                                label: "",
                                data: d1,
                                lines: {
                                    lineWidth: 1,
                                },
                                shadowSize: 0
                            }],
                        options
                        );
                $.plot($("#chart_1_2"),
                        [{
                                label: "",
                                data: d1,
                                lines: {
                                    lineWidth: 1,
                                },
                                shadowSize: 0
                            }],
                        options
                        );
                $.plot($("#chart_1_3"),
                        [{
                                label: "",
                                data: d1,
                                lines: {
                                    lineWidth: 1,
                                },
                                shadowSize: 0
                            }],
                        options
                        );
                $.plot($("#chart_1_4"),
                        [{
                                label: "",
                                data: d1,
                                lines: {
                                    lineWidth: 1,
                                },
                                shadowSize: 0
                            }],
                        options
                        );
            });
            function getTime(m) {
                var d = new Date(2016, 1, 1, 0, m, 0);
                d.setHours(0);
                return d;
            }
            function initAddRoleItemChange() {
                //thresholds html
                var abnormalHtml = '<select class="form-control" name="thresholds[]"><option value="1">异常</option></select>';
                var thresholdHtml = '<input class="form-control inline" name="thresholds[]" type="text" placeholder="阀值" style="width:100px"> M';
                var statusHtml = '<select class="form-control" name="thresholds[]"><option value="1">服务器未开启</option></select>';
                var loadHtml = '<input class="form-control inline" name="thresholds[]" type="text" placeholder="阀值" style="width:100px"> %';
                var ioHtml = '<input class="form-control inline" name="thresholds[]" type="text" placeholder="阀值" style="width:100px"> k';
                var diskHtml = '<input class="form-control inline" name="thresholds[]" type="text" placeholder="阀值" style="width:100px"> GB';
                //统计方法html
                var methodStatusHtml = '<select class="form-control" name="method[]"><option value="5">状态</option></select>';
                var methodAverageHtml = '<select class="form-control" name="method[]"><option value="1">平均值</option><option value="2">最大值</option><option value="3">最小值</option></select>';
                //比较html
                var compareEqualHtml = '<select class="form-control" name="operator[]"><option value="5">等于</option></select>';
                var compareAllHtml = '<select class="form-control" name="operator[]"><option value="1">大于</option><option value="2">大于等于</option><option value="3">小于</option><option value="4">小于等于</option><option value="5">等于</option></select>';
                $('.addRoleTable tbody select.item').change(function () {
                    var _this = $(this);
                    var itemId = _this.val();
                    var innerHtml = '';
                    var methodHtml = '';
                    var compareHtml = '';
                    switch (itemId) {
                        case '1':
                            innerHtml = abnormalHtml;
                            methodHtml = methodStatusHtml;
                            compareHtml = compareEqualHtml;
                            break;
                        case '2':
                            innerHtml = thresholdHtml;
                            methodHtml = methodAverageHtml;
                            compareHtml = compareAllHtml;
                            break;
                        case '3':
                            innerHtml = thresholdHtml;
                            methodHtml = methodAverageHtml;
                            compareHtml = compareAllHtml;
                            break;
                        case '4':
                            innerHtml = statusHtml;
                            methodHtml = methodStatusHtml;
                            compareHtml = compareEqualHtml;
                            break;
                        case '5':
                            innerHtml = loadHtml;
                            methodHtml = methodAverageHtml;
                            compareHtml = compareAllHtml;
                            break;
                        case '6':
                            innerHtml = loadHtml;
                            methodHtml = methodAverageHtml;
                            compareHtml = compareAllHtml;
                            break;
                        case '7':
                            innerHtml = ioHtml;
                            methodHtml = methodAverageHtml;
                            compareHtml = compareAllHtml;
                            break;
                        case '8':
                            innerHtml = ioHtml;
                            methodHtml = methodAverageHtml;
                            compareHtml = compareAllHtml;
                            break;
                        case '9':
                            innerHtml = diskHtml;
                            methodHtml = methodAverageHtml;
                            compareHtml = compareAllHtml;
                            break;
                        case '10':
                            innerHtml = thresholdHtml;
                            methodHtml = methodAverageHtml;
                            compareHtml = compareAllHtml;
                            break;
                        default:
                            innerHtml = abnormalHtml;
                            methodHtml = methodStatusHtml;
                            compareHtml = compareEqualHtml;
                    }
                    _this.parents('tr').find('.thresholds').html(innerHtml);
                    _this.parents('tr').find('.method').html(methodHtml);
                    _this.parents('tr').find('.operator').html(compareHtml);
                });
            }
        </script>
        <!--[if lt IE 9]>
<script src="../assets/global/plugins/respond.min.js"></script>
<script src="../assets/global/plugins/excanvas.min.js"></script> 
<![endif]-->
    </body>
</html>